
<style lang="scss" scoped>
.entrusthistory {
  float: left;
  width: 100%;
  padding-left: 30px;
}

.page {
  text-align: right;
  margin-top: 20px;
}
.table {
  border-radius: 4px;
}
.table .ivu-table-wrapper {
  position: relative;
  /* border: 1px solid #dddee1; */
  border-bottom: 0;
  border-right: 0;
  // box-shadow: 0 0 2px #ccc;
  border-radius: 4px;
  // overflow: hidden;
}
.form.ivu-form-inline .ivu-form-item {
  display: inline-block;
}
</style>
<style lang="scss">
.entrusthistory .ivu-table th,
.entrusthistory .ivu-table td {
  text-align: center;
}
.table .ivu-table-cell-expand {
  color: #f0a70a;
}
</style>

<template>
  <div class="entrusthistory">
    <div class="table">
      <Table :no-data-text="$t('common.nodata')" :columns="columns" :data="orders" :loading="loading"></Table>

      <ImagePreview v-model="preview" :preview-list="urlList" />
      <div class="page">
<!--        <Page :total="total" :pageSize="pageSize" :current="pageNo" @on-change="loadDataPage"></Page>-->
      </div>
    </div>
  </div>
</template>
<script>
var moment = require("moment");
import expandRow from "@components/exchange/expand.vue";
import { ImagePreview } from 'iview'
export default {
  components: { expandRow, ImagePreview },
  data() {
    const self = this;
    return {
      urlList: [],
      preview: false,
      loading: false,
      pageSize: 10,
      pageNo: 1,
      total: 10,
      symbol: [],
      formItem: {
        symbol: "",
        type: "",
        direction: "",
        date: ""
      },
      columns: [
        {
          type: "index",
          width: 30,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                skin: params.row.skin,
                rows: params.row.detail
              }
            });
          }
        },
        // {
        //   title: self.$t("exchange.time"),
        //   key: "time",
        //   minWidth: 55,
        //   render: (h, params) => {
        //     return h("span", {}, self.dateFormat(params.row.time));
        //   }
        // },
        //
        {
          title: "订单号",
          key: "numbers",
          render(h, params) {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.numbers
                }
              },
              params.row.numbers
            );
          }
        }, {
          title: self.$t("uc.finance.trade.turnover"),
          key: "turnover",
          render(h, params) {
            return h(
              "span",
              {
                attrs: {
                  title: params.row.m
                }
              },
              params.row.m
            );
          }
        },
        {
          title: "转账截图",
          key: "img",
          width: 180,
          render: (h, params) => {
            const self = this
              return h(
                "img",
                {
                  attrs: {
                    src: params.row.img
                  },
                  on: {
                    click:function() {
                      console.log(self.urlList)
                      self.urlList = [params.row.img]
                      self.preview = true
                    }
                  },
                  style: {
                    width: "100px",
                    height: "100px"
                  }
                },
              );
          }
        }
      ],
      orders: []
    };
  },
  computed:{
    lang: function() {
      return this.$store.state.lang;
    }
  },
  watch: {
    lang: function() {
      this.updateLangData();
    }
  },
  created() {
    this.getHistoryOrder();
  },
  methods: {
    dateFormat: function(tick) {
      return moment(tick).format("YYYY-MM-DD HH:mm:ss");
    },
    loadDataPage(data) {
      this.pageNo = data;
      this.getHistoryOrder();
    },
    handleSubmit() {
      this.pageNo = 1;
      this.getHistoryOrder();
    },
    handleClear() {
      this.formItem = {
        symbol: "",
        type: "",
        direction: "",
        date: ""
      };
    },
    getHistoryOrder() {
      //查询历史委托
      this.loading = true;
      var that = this;
      this.orders = [];
      this.$http
        .get( "/api/getIncome?token="+sessionStorage.getItem('token'))
        .then(response => {
          var resp = response.body;
          console.log(resp)
          this.orders = resp.data
          this.loading = false;
        });
    },
    getSymbol() {
      this.$http.post(this.host + this.api.market.thumb, {}).then(response => {
        var resp = response.body;
        if (resp.length > 0) {
          this.symbol = resp;
        }
      });
    },
    updateLangData(){
      this.columns[1].title = this.$t("exchange.time");
      this.columns[2].title = this.$t("uc.finance.trade.symbol");
      this.columns[3].title = this.$t("uc.finance.trade.type");
      this.columns[4].title = this.$t("exchange.direction");
      this.columns[5].title = this.$t("exchange.price");
      this.columns[6].title = this.$t("exchange.num");
      this.columns[7].title = this.$t("exchange.traded");
      this.columns[8].title = this.$t("uc.finance.trade.turnover");
      this.columns[9].title = this.$t("exchange.status");
    }
  }
};
</script>

